<template>

  <mt-tab-container-item>

     <mt-header title="分类" fixed> </mt-header>
     
    <div class="cartegory_left">

      <mt-cell title="标题文字"></mt-cell>
      <mt-cell title="标题文字"></mt-cell>
      <mt-cell title="标题文字"></mt-cell>
      <mt-cell title="标题文字"></mt-cell>
      <mt-cell title="标题文字"></mt-cell>
      <mt-cell title="标题文字"></mt-cell>
      <mt-cell title="标题文字"></mt-cell>
      <mt-cell title="标题文字"></mt-cell>
      <mt-cell title="标题文字"></mt-cell>
      <mt-cell title="标题文字"></mt-cell>
      <mt-cell title="标题文字"></mt-cell>
      <mt-cell title="标题文字"></mt-cell>
      <mt-cell title="标题文字"></mt-cell>
      <mt-cell title="标题文字"></mt-cell>
      <mt-cell title="标题文字"></mt-cell>
      <div class="clear" />
    </div>
    <div class="cartegory_right">
      <div class="toolCol" @click="handchange">
        <span class="icon-account toolimage"></span>
        <span class='tabText'>xxx</span>
      </div>

      <div class="toolCol">
        <span class="icon-account toolimage"></span>
        <span class='tabText'>xxx</span>
      </div>

      <div class="toolCol ">
        <span class="icon-account toolimage"></span>
        <span class='tabText'>xxx</span>
      </div>

      <div class="toolCol">
        <span class="icon-account toolimage"></span>
        <span class='tabText'>xxx</span>
      </div>
      <div class="toolCol">
        <span class="icon-account toolimage"></span>
        <span class='tabText'>xxx</span>
      </div>
      <div class="toolCol">
        <span class="icon-account toolimage"></span>
        <span class='tabText'>xxx</span>
      </div>
      <div class="toolCol">
        <span class="icon-account toolimage"></span>
        <span class='tabText'>xxx</span>
      </div>
      <div class="toolCol">
        <span class="icon-account toolimage"></span>
        <span class='tabText'>xxx</span>
      </div>


    </div>

  </mt-tab-container-item>

</template>

<script>
  export default {
    data(){
      return{
        selected:"Category",

      }
    },
    props: {

    },
    methods:{
      handchange:function () {

      }
    },
    watch:{
     testchange:function (val, oldVal) {

      }
    },
    mounted:function(){
      console.log(this.$route.path+"xxxx");
    }

  }
</script>

<style scoped>
.cartegory_left{
  /*background: #F6F6F6;*/
  float: left;
  width: 25%;
  overflow-x: hidden;
  overflow-y: auto;
  height: 85vh;
  padding: 2.6rem 0 3rem 0px;

}
.cartegory_right{
  float: left;
  width: 75%;
  color:  #666;
  font-size:1rem;
  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content: space-around;
  background: #fff;
  padding-top: 3rem;
  padding-bottom: 3rem;

}
.toolCol{
  width:25%;
  height:3rem;
  text-align: center;
}
.toolimage{
  display:block;padding-bottom:0.3rem;
}

</style>
